<%@ page language="java" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://zlzkj.com/tags" prefix="z" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html>
<html>
<head>
    <title>鼎研能源管理系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
<div class="templatemo-content col-1 light-gray-bg">
    <div class="templatemo-content-container">
        <div class="templatemo-content-widget no-padding">
            <div class="zlzkj_item_content table-responsive">
                <div class="modal-header">
                    <div class="text-info"><p>能源计划管理</p></div>
                </div>
                <div class="col-sm-12">
                    <form id="search-form">
                        <input type="hidden" name="nowPage">
                        <div class="zlzkj_tool_bar">
                            <div class="zlzkj_left_tool_bar">
                                关键字：<input class="datainp wicon" type="text" placeholder="关键词" name="keyword">
                                <!-- <select name="isLocked" class="status_choose">
                                    <option value="">全部</option>
                                    <option value="0">启用</option>
                                    <option value="1">禁用</option>
                                </select> -->
                                起始时间:<input class="datainp wicon" type="text" placeholder="请选择时间" id="inpstart" readonly>
                                结束时间:<input class="datainp wicon" type="text" placeholder="请选择时间" id="inpend" readonly>
                                <a class="searchUser btn btn-primary btm-sm"><i class="fa fa-search fa-fw"></i>搜索</a>
                            </div>
                            <div class="zlzkj_right_tool_bar">
                                <a class="createMission btn btn-primary btm-sm"><i class="fa fa-plus fa-fw"></i>添加</a>
                                <a class="batchDeleteUser btn btn-danger btm-sm"><i class="fa fa-trash-o fa-fw"></i>删除</a>
                            </div>
                        </div>
                    </form>
                    <div id="user-view">
                        <form class="ids-form">
                            <table class="zlzkj_table table table-striped table-hover"><%--table-bordered--%>
                                <thead>
                                <tr>
                                    <th width="5%"><a href="javascript:void(0)" class="checkall">全选</a></th>
                                    <th width="10%">计划名称</th>
                                    <th width="5%">计划组别</th>
                                    <th width="10%">开始时间</th>
                                    <th width="10%">结束时间</th>
                                    <th width="10%">发布者</th>
                                    <th width="35%">备注</th>
                                    <th width="10%">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <c:forEach var="v" items="${pageView.page.items}">
                                    <tr data-id="${v.id}" data-name="${v.planName}">
                                        <td><input type="checkbox" name="id" value="${v.id}"></td>
                                        <td>${v.planName}</td>
                                        <td>${v.groupId}</td>
                                        <td><fmt:formatDate value="${v.startTime}" pattern="yyyy/M/d"/></td>
                                        <td><fmt:formatDate value="${v.stopTime}" pattern="yyyy/M/d"/></td>
                                        <td>${v.author}</td>
                                        <td>${v.remark}</td>
                                        <td>
                                            <input type="button" class="btn btn-default btn-sm editUser" value="编辑">
                                            <input type="button" class="btn btn-default btn-sm deleteUser" value="删除">
                                        </td>
                                    </tr>
                                </c:forEach>
                                <c:if test="${pageView.page.items.size() == 0}">
                                    <tr>
                                        <td colspan="8" align="center">暂无数据</td>
                                    </tr>
                                </c:if>
                                </tbody>
                            </table>
                        </form>

                        <c:set var="page" value="${pageView.getPage() }"></c:set>
                        <div id="page-view">
                            <nav class="zlzkj_pagination">
                                <ul class="pagination">
                                    <c:choose>
                                        <c:when test="${page.currentPage() == page.firstPage()}">
                                            <li class="disabled"><a href="javascript:void(0);"><span>上一页</span></a></li>
                                        </c:when>
                                        <c:otherwise>
                                            <li>
                                                <a href="javascript:refreshTable('${page.previousPage()}')"><span>上一页</span></a>
                                            </li>
                                        </c:otherwise>
                                    </c:choose>
                                    <c:forEach var="p" items="${pageView.showPages()}" varStatus="s">
                                        <c:choose>
                                            <c:when test="${p == page.currentPage()}">
                                                <li class="active"><a href="javascript:void(0);">${p}</a></li>
                                            </c:when>
                                            <c:when test="${p == 0}">
                                                <li><a>...</a></li>
                                            </c:when>
                                            <c:otherwise>
                                                <li>
                                                    <a href="javascript:refreshTable('${p}')"><span>${p}</span></a>
                                                </li>
                                            </c:otherwise>
                                        </c:choose>
                                    </c:forEach>
                                    <c:choose>
                                        <c:when test="${page.currentPage() == page.lastPage()}">
                                            <li class="disabled"><a href="javascript:void(0);"><span>下一页</span></a></li>
                                        </c:when>
                                        <c:otherwise>
                                            <li>
                                                <a href="javascript:refreshTable('${page.nextPage()}')"><span>下一页</span></a>
                                            </li>
                                        </c:otherwise>
                                    </c:choose>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 制定计划&模态框-->
            <div class="modal fade bs-example-modal-lg" id="commonModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog" style="width:1200px;">
                    <div class="modal-content">

                    </div>
                </div>
            </div>
        </div>

        <div id="reportview"></div>
        <footer class="zlzkj_footer">
            <p>Copyright &copy; HangZhou DingYan Tech
                | 杭州鼎研科技有限公司版权所有</p>
        </footer>
    </div>
</div>

<script type="text/javascript">
    // 日期联动控件
    $(function () {
        $("#inpstart").datetimepicker({
            format: "yyyy-mm-dd",
            todayBtn: "linked",
            language: "zh-CN",
            autoclose: true,
            minView: 2,
            startDate: "1900-01-01",
            endDate: "2900-12-31"
        }).on("changeDate",function(event) {
            $("#inpend").datetimepicker("setStartDate",$("#inpstart").val());
        });
        $("#inpend").datetimepicker({
            format: "yyyy-mm-dd",
            todayBtn: "linked",
            language: "zh-CN",
            autoclose: true,
            minView: 2,
            startDate: "1900-01-01",
            endDate: "2900-12-31"
        }).on("changeDate",function(event) {
            $("#inpstart").datetimepicker("setEndDate",$("#inpend").val());
        });
    });
	function timeValidate() {
        $("#start").datetimepicker({
            format: "yyyy-mm-dd",
            todayBtn: "linked",
            language: "zh-CN",
            autoclose: true,
            minView: 2,
            startDate: "1900-01-01",
            endDate: "2900-12-31"
        }).on("changeDate",function(event) {
            $("#end").datetimepicker("setStartDate",$("#start").val());
        });
        $("#end").datetimepicker({
            format: "yyyy-mm-dd",
            todayBtn: "linked",
            language: "zh-CN",
            autoclose: true,
            minView: 2,
            startDate: "1900-01-01",
            endDate: "2900-12-31"
        }).on("changeDate",function(event) {
            $("#start").datetimepicker("setEndDate",$("#end").val());
        });
    }

    $(document).ready(function () {
        // //图片预览
        // $('.fancybox').fancybox();

        //添加点击事件
        initOperation();

        //header 用户下拉重新
        $('.dropdown-toggle').dropdown();

        $(".searchUser").off("click").on("click", function () {
            refreshTable(0);
        });
    });

    //刷新数据
    function refreshTable(nowPage) {
        if (nowPage != 0)
            $("#search-form [name=nowPage]").val(nowPage);
        $.ajax({
            type: "POST",
            url: "${z:u('plan/list')}",
            data: $("#search-form").serialize(),
            success: function (result) {
                $.each(result.pageView.page.items, function (index, content) {
                    if (content == null) {
                        result.page.items = [];
                        return false;
                    }
                    //content.created_time = new Date(content.created_time).Format("yyyy-MM-dd HH:mm");// HH:mm:ss
                });
                $("#user-view").html($("#userViewTemplate").tmpl(result.pageView));
                initOperation();
            }
        });
    }

    function toChangeenergyId() {
        //alert($("#groupId").val());
        $.ajax({
            type: "POST",
            url: "${z:u('plan/toCreate2')}",
            data: {ids: $("#groupId").val()},
            success: function (result) {
                $("#energyId").html($("#energyIdTemplate").tmpl({energy: result.energy}));
                $("#groupIdoption0").hide();
            }
        });
    }
    function toChangeenergy() {
        //alert("#energyIdoption"+$('#energyId').val());
        $.ajax({
            type: "POST",
            url: "${z:u('plan/toCreate3')}",
            data: {ids: $("#energyId").val()},
            success: function (result) {
                $("#energydetails").after($("#energyTemplate").tmpl({energy: result.energy}));
                $("#energyIdoption0").hide();
                $("#energyIdoption"+$('#energyId').val()).hide();
                $("#energydetails").hide();
            }
        });
    }


    function initOperation() {
        $(".createMission").off("click").on("click", function () {
            $.ajax({
                type: "POST",
                url: "${z:u('plan/toCreate')}",
                data: {},
                success: function (result) {
                    var obj = {id:'',planName:'', author: '', startTime: '', stopTime: '',remark:'', eneryId: ''};
                    //console.log(obj)
                    $("#commonModal .modal-content").html($("#userTemplate").tmpl({obj: obj, groups: result.groups, energy: result.energy}));
                    timeValidate();
                    userFormValidate();
                }
            });
        });

        $(".editUser").off("click").on("click", function () {
            $.ajax({
                type: "POST",
                url: "${z:u('plan/toEdit')}",
                data: {id: $(this).closest("tr").data("id")},
                success: function (result) {
                    result.obj.startTime = new Date(result.obj.startTime).Format("yyyy-MM-dd");// HH:mm:ss
                    result.obj.stopTime = new Date(result.obj.stopTime).Format("yyyy-MM-dd");// HH:mm:ss
                    $("#commonModal .modal-content").html($("#userTemplate").tmpl({obj: result.obj, groups: result.groups, energy: result.energy}));
                    $("#energydetails").after($("#energyTemplate2").tmpl({planitems: result.planitems}));
                    $("#energydetails").hide();
                    timeValidate();
                    userFormValidate();
                }
            });
        });

        $(".deleteUser").off("click").on("click", function () {
            var id = $(this).closest("tr").data("id");
            $.confirm({
                title: '系统提示',
                content: "确认要删除'<font color='#f00'>" + $(this).closest("tr").data("name") + "</font>'吗？",
                buttons: {
                    ok: {
                        text: '确认',
                        btnClass: 'btn-primary',
                        action: function () {
                            $.post("${z:u('plan/delete')}", {id: id}, function (data, textStatus, xhr) {
                                if (data > 0) {
                                    refreshTable(0);
                                    noty({
                                        dismissQueue: true,
                                        force: true,
                                        timeout: 1000,
                                        layout: 'topCenter',
                                        theme: 'default',
                                        text: '删除成功',
                                        type: 'success'
                                    });
                                } else {
                                    noty({
                                        dismissQueue: true,
                                        force: true,
                                        timeout: 1000,
                                        layout: 'topCenter',
                                        theme: 'default',
                                        text: '删除失败',
                                        type: 'error'
                                    });
                                }
                            });
                        }
                    },
                    cancel: {
                        text: '取消',
                        btnClass: 'btn-primary',
                        action: function () {
                            // button action.
                        }
                    },
                }
            });
        });

        $(".batchDeleteUser").off("click").on("click", function () {
            var checkbox = $("input[type=checkbox]:checked");
            if (checkbox.length == 0) return;
            var content = "";
            for (var i = 0; i < checkbox.length; i++) {
                content += "'<font color='#f00'>" + checkbox.eq(i).closest("tr").data("name") + "</font>'&nbsp;";
            }
            $.confirm({
                title: '系统提示',
                content: "确认要删除" + content + ",这<font color='#f00'>" + checkbox.length + "</font>条数据吗？",
                buttons: {
                    ok: {
                        text: '确认',
                        btnClass: 'btn-primary',
                        action: function () {
                            $.post("${z:u('plan/delete')}", $(".ids-form").serialize(), function (data, textStatus, xhr) {
                                if (data > 0) {
                                    refreshTable(0);
                                    noty({
                                        dismissQueue: true,
                                        force: true,
                                        timeout: 1000,
                                        layout: 'topCenter',
                                        theme: 'default',
                                        text: '删除成功',
                                        type: 'success'
                                    });
                                } else {
                                    noty({
                                        dismissQueue: true,
                                        force: true,
                                        timeout: 1000,
                                        layout: 'topCenter',
                                        theme: 'default',
                                        text: '删除失败',
                                        type: 'error'
                                    });
                                }
                            });
                        }
                    },
                    cancel: {
                        text: '取消',
                        btnClass: 'btn-primary',
                        action: function () {
                            // button action.
                        }
                    },
                }
            });
        });
    }

    //表单验证
    function userFormValidate() {
        $("#commonModal").modal('show');
        $('#user-form').validate(
            {
                submitHandler: function (form) {
                    $(".confirm").button('loading');
                    $(form).ajaxSubmit({
                        dataType: "json",
                        type: "post",
                        success: function (data, s, xhr) {
                            if (data == 1) {
                                refreshTable(0);
                                $(".confirm").button('reset');
                                $("#commonModal").modal('hide');
                            }
                        }
                    });
                },
                errorPlacement: function (error, element) {
                    error.replaceAll($(element).next());
                },
                rules: {
                    planName: {
                        maxlength: 10,
                        required: true
                    },
                    author: {
                        required: true,
                        // remote: {
                        //     url: '${z:u('plan/checkUsername')}',
                        //     type: 'post',
                        //     dataType: 'json',
                        //     data: {
                        //         name: function () {
                        //             return $("[name='author']").val();
                        //         },
                        //         originalname: ""
                        //     }
                        // }
                    },
                    groupId: {
                        required: true
                    },
                    startTime1: {
                        required: true
                    },
                    stopTime1: {
                        required: true,
                    },
                    remark: {
                        maxlength: 50,
                        required: true
                    },
                    energyId: {
                        required: true
                    }
                },
                messages: {
                    planName: {
                        required: "必填！"
                    },
                    author: {
                        required: "必填！"
                    },
                    groupId: {
                        required: "请选择！",
                    },
                    startTime1: {
                        required: "请选择！"
                    },
                    stopTime1: {
                        required: "请选择！",
                    },
                    remark: {
                        required: "选填！"
                    },
                    energyId: {
                        required: "必填！"
                    }
                },
                success: function (label) {
                    label.hide();
                }
            });
    }

</script>
<!--局部刷新-->
<script type="text/html" id="energyIdTemplate">
    <option value="" id="energyIdoption0"> ==请选择！== </option>
    {%each energy %}
    <option value="{%= id %}" id="energyIdoption{%= id %}">{%= name%}</option>
    {%/each%}
</script>
<script type="text/html" id="energyTemplate">
    {%each energy%}
    <tr>
        <input type="hidden" name="clectPlanitemEnergyId" value="{%= id %}" readonly="readonly"/>
        <td><input type="text" class="form-control input-sm" value="{%= name %}" readonly="readonly"/></td>
        <td><input type="text" name="clectPlanitemAmount" class="form-control input-sm"></td>
        <td>
            <a class="btn btn-danger btn-sm" onclick="$(this).parents('tr').remove();">
                <i class="icon-trash"></i> 删除
            </a>
        </td>
    </tr>
    {%/each%}
</script>
<script type="text/html" id="energyTemplate2">
    {%each planitems%}
    <tr>
        <input type="hidden" name="clectPlanitemEnergyId" value="{%= energyId %}" readonly="readonly"/>
        <td><input type="text" name="" class="form-control input-sm" value="{%= name %}" readonly="readonly"/></td>
        <td><input type="text" name="clectPlanitemAmount" value="{%= amount %}" class="form-control input-sm"></td>
        <td>
            <a class="btn btn-danger btn-sm" onclick="$(this).parents('tr').remove();">
                <i class="icon-trash"></i> 删除
            </a>
        </td>
    </tr>
    {%/each%}
</script>
<!--添加页-->
<script type="text/html" id="userTemplate">
    <form id="user-form" method="post" class="form-horizontal" role="form" action="{%= obj.id == 0 ? '${z:u('plan/create')}':'${z:u('plan/update')}'%}" autocomplete="off">
    	<input type="hidden" name="id" readonly="readonly" value="{%= obj.id%}"/>
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            {%if obj.id == 0 %}
            <h4 class="head">添加计划组</h4>
            {%else%}
            <h4 class="head">修改计划组</h4>
            {%/if%}
        </div>

        <div class="viewTable">
            <div class="form-group col-sm-12 " style="border:none;margin-top: 1%;">
                <label class="col-sm-2 control-label">制定人员：</label>
                <div class="col-sm-4">
                    <input type="text" name="author" class="form-control input-sm" value="{%= obj.author %}">
                    <label id="author-error" class="control-label"></label>
                </div>

                <label class="col-sm-2 control-label">计划名称：</label>
                <div class="col-sm-4">
                    <input type="text" name="planName" class="form-control input-sm" value="{%= obj.planName %}">
                    <label id="planName-error" class="control-label"></label>
                </div>
            </div>

            <div class="form-group col-sm-12 " style="border:none">
                <label class="col-sm-2 control-label">开始时间：</label>
                <div class="col-sm-4">
                	<input class="form-control" type="text" id="start" name="startTime1" value="{%= obj.startTime %}" readonly>
                    <label id="startTime-error" class="control-label"></label>
                </div>
                <label class="col-sm-2 control-label">结束时间：</label>
                <div class="col-sm-4">
                    <input class="form-control" type="text" id="end" name="stopTime1" value="{%= obj.stopTime %}" readonly>
                    <label id="stopTime-error" class="control-label"></label>
                </div>
            </div>

            <div class="form-group col-sm-12 " style="border:none">
                <label class="col-sm-2 control-label">计划厂房：</label>
                <div class="col-sm-4">
                    <select class="form-control" name="groupId" onchange="toChangeenergyId()" id="groupId">
                        <option value="" id="groupIdoption0"> ==请选择！== </option>
                        {%each groups %}
                        {%if obj.groupId == id%}
                        <option value="{%= id %}" selected="selected">{%= name%}</option>
                        {%else%}
                        <option value="{%= id %}">{%= name%}</option>
                        {%/if%}
                        {%/each%}
                    </select>
                    <label id="groupId-error" class="control-label"></label>
                </div>
            </div>

            <div class="form-group col-sm-12 " style="border:none">
                <label class="col-sm-2 control-label">备注：</label>
                <div class="col-sm-10">
                    <textarea class="form-control" name="remark"  style="height:120px;">{%= obj.remark %}</textarea>
                    <label id="remark-error" class="control-label"></label>
                </div>
            </div>
        </div>

        <div style="clear: both"></div>
        <div class="form-group col-sm-10" style="border:none;width: 100%;">
            <label class="col-sm-2 control-label">计划能源：</label>
            <div class="col-sm-4">
                <select name="" class="form-control input-sm"  onchange="toChangeenergy()" id="energyId">
                    <option  id="energyIdoption0"> ==请选择！== </option>
                    {%each energy %}
                    <option value="{%= id %}" id="energyIdoption{%= id %}">{%= name%}</option>
                    {%/each%}
                </select>
                <label id="energyId-error" class="control-label"></label>
            </div>

            <div style="margin:auto 1%;">
                <table class="table tableTemp table-striped table-condensed table-bordered">
                    <tbody>
                    <tr class="firstchild">
                        <td>能源名称</td>
                        <td>数量</td>
                        <td>操作</td>
                    </tr>
                    <tr class="nodata" id="energydetails">
                        <td colspan="4">暂无数据</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div style="clear:both"></div>
        <div class="modal-footer">
            <input type="submit" class="btn btn-primary confirm btn-sm" data-loading-text="加载中.." value="提交"/>
            <a class="btn btn-primary common-modal-cancel btn-sm">取消</a>
        </div>
    </form>
</script>

<script type="text/html" id="userViewTemplate">
    <form class="ids-form">
        <table class="zlzkj_table table table-striped table-hover" style="margin-top: 5px"><%--table-bordered--%>
            <thead>
            <tr>
                <th width="5%"><a href="javascript:void(0)" class="checkall">全选</a></th>
                <th width="10%">计划名称</th>
                <th width="10%">计划组别</th>
                <th width="10%">开始时间</th>
                <th width="10%">结束时间</th>
                <th width="10%">发布者</th>
                <th width="35%">备注</th>
                <th width="10%">操作</th>
            </tr>
            </thead>
            <tbody>
            {%each(i,v) page.items %}
            <tr data-id="{%= v.id %}" data-name="{%= v.planName%}">
                <td><input type="checkbox" name="id" value="{%= v.id %}"></td>
                <td>{%= v.planName%}</td>
                <td>{%= v.groupId%}</td>
                <td>{%= v.startTime%}</td>
                <td>{%= v.stopTime%}</td>
                <td>{%= v.author%}</td>
                <td>{%= v.remark%}</td>
                <td>
                    <input type="button" class="btn btn-default btn-sm editUser" value="编辑">
                    <input type="button" class="btn btn-default btn-sm deleteUser" value="删除">
                </td>
            </tr>
            {%/each%}
            {%if page.items.length == 0%}
            <tr>
                <td colspan="8" align="center">暂无数据</td>
            </tr>
            {%/if%}
            </tbody>
        </table>
    </form>

    {%if page.totalPage != 1 %}
    <nav class="zlzkj_pagination">
        <ul class="pagination">
            {%if page.pageNum == 1 %}
            <li class="disabled"><a href="javascript:void(0);">上一页</a></li>
            {%else%}
            <li><a href="javascript:void(0);" onclick="refreshTable('{%= (page.pageNum-1)%}')"><span>上一页</span></a></li>
            {%/if%}

            {%each(i,v) showPages %}
            {%if v == page.pageNum %}
            <li class="active"><a href="javascript:void(0);">{%= v %}</a></li>
            {%elseif v == 0 %}
            <li><a>...</a></li>
            {%else%}
            <li><a href="javascript:void(0);" onclick="refreshTable('{%= v %}')"><span>{%= v %}</span></a></li>
            {%/if%}
            {%/each%}

            {%if page.pageNum == page.totalPage %}
            <li class="disabled"><a href="javascript:void(0);">下一页</a></li>
            {%else%}
            <li><a href="javascript:void(0);" onclick="refreshTable('{%= (page.pageNum+1)%}')"><span>下一页</span></a></li>
            {%/if%}
        </ul>
    </nav>
    {%/if%}
</script>
</body>
</html>